<template>
  <div>
    <header>
      <!-- <Date_picker v-model="dates" /> -->
      <!-- <el-button type="primary" class="ml-25" @click="getdateArr">获取dateArr</el-button> -->
    </header>
    <div class="content-left">
      <div class="left-child">
        child
      </div>
    </div>
    <div class="content-right">
      <div class="right-child">you</div>
    </div>
    <footer>
      <!-- <div class="footer-child">底部</div> -->
      <div class="taxian"></div>
      <!-- <div class="line"></div> -->
      <div class="taxian xiaochutaxian"></div>
      <div class="taxian"></div>
    </footer>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  components: {
    Date_picker: () => import("@/components/newDatePicker.vue")
  },
  mounted() {
    console.log('dayjs',dayjs().startOf('year').format());
    window.q = 2;
    var obj = {
      q:111,
      fun:function(){
        console.log(this.q);
      }
    }
    obj.fun.call(window)
  },
  data() {
    return {
      dates:[]
    };
  },
  methods:{
    getdateArr() {
      console.log('dates',this.dates);
    },
  }
};
</script>

<style lang="less" scoped>
header {
  height: 140px;
  background: burlywood;
}
.content-left {
  float: left;
  position: relative;
  width: 30%;
  height: 200px;
  background: lightblue;
  margin-right: 1%;
  .left-child {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border: 1px solid red;
    // vertical-align: middle!important;
  }
}
.content-right {
  float: right;
  width: 69%;
  height: 200px;
  background: lightgray;
  position: relative;
  .right-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
}
}
footer {
  height: 140px;
  background: lightgreen;
  clear: both;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .footer-child {
    border: 1px solid blue;
  }
  .taxian {
    height: 20px;
    margin: 10px 0;
    width: 100%;
    background: yellow;
    display: inline-block;

  }
  .xiaochutaxian {
    width: 100%;
    // display: inline-block;
  }
  // .line {
  //   border-top: 0.1px solid #fff;
  // }
}
.box::before,.box::after {
  content: "";
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
</style>